<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title></title>
  <link rel="stylesheet" href="http://localhost:3000/css/approve.css">
</head>
<body>
  <div class="statusbar-overlay"></div>
  <div class="panel-overlay"></div>
  <div class="views">
    <div class="view view-main">
      <div class="pages">
        <div data-page="" class="page navbar-fixed">

          <div class="navbar m-navbar s-navbar-blue">
            <div class="navbar-inner">
              <a href="#" class="left u-arrow-left back link"></a> 
              <div class="center">详情</div>
              <a href="#" class="right">打印</a>
            </div>
          </div>

          <div class="page-content" id="js_detail">
            <div class="list-block m-list">
              <ul>
                <li class="item-content">
                  <div class="item-inner">
                    <div class="item-title">请假类型</div>
                    <div class="item-after">婚假</div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list-block m-list">
              <ul>
                <li class="item-content">
                  <div class="item-inner">
                    <div class="item-title">开始时间</div>
                    <div class="item-after">20115-12-15 12:05</div>
                  </div>
                </li>
                <li class="item-content">
                  <div class="item-inner">
                    <div class="item-title">结束时间</div>
                    <div class="item-after">20115-12-15 12:05</div>
                  </div>
                </li>
                <li class="item-content">
                  <div class="item-inner">
                    <div class="item-title">请假时长</div>
                    <div class="item-after">5小时40分</div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list-block m-list">
              <ul>
                <li class="item-content">
                  <div class="item-inner">
                    <div class="item-title textarea-tit"><span class="txttit">请假事由</span></div>
                    <div class="item-input text">
                       <span>我要去听演唱会，这是我第一次听，希望领导批准</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="m-approveFlow">
              <ul>
                <li class="item f-cb">
                  <img class="head" src="../img/head-portrait/amei.jpg">
                  <div class="con">
                    <span class="name">阿妹</span>
                    <span class="status color-blue">发起审批</span>  
                  </div>
                  <span class="time">20115-12-15 12:30</span>
                </li>
                <li class="item"><i class="arrow"></i></li>
                <li class="item f-cb">
                  <img class="head" src="../img/head-portrait/amei.jpg">
                  <div class="con">
                    <span class="name agree">阿妹</span>
                    <span class="status">我同意</span>  
                  </div>
                  <span class="time">20115-12-15 12:30</span>
                </li>
                <li class="item"><i class="arrow"></i></li>
                <li class="item f-cb">
                  <img class="head" src="../img/head-portrait/amei.jpg">
                  <div class="con">
                    <span class="name refuse">阿妹</span>
                    <span class="status">我不同意</span>  
                  </div>
                </li>
                <li class="item"><i class="arrow"></i></li>
                <li class="item f-cb">
                  <img class="head" src="../img/head-portrait/amei.jpg">
                  <div class="con">
                    <span class="name careOf">阿妹</span>
                    <span class="status">我已经转交啦</span>  
                  </div>
                </li>
                <li class="item"><i class="arrow"></i></li>
                <li class="item f-cb">
                  <img class="head" src="../img/head-portrait/amei.jpg">
                  <div class="con">
                    <span class="name only">阿妹</span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="m-approveFlow">
              <ul>
                <li class="item f-cb">
                  <div class="tit">抄送</div>
                  <img class="head" src="../img/head-portrait/amei.jpg">
                  <div class="con">
                    <span class="name only">阿妹</span> 
                  </div>
                </li>
              </ul>
            </div>
            <div class="list-block m-list">
              <ul>
                <li class="item-content">
                  <div class="item-inner">
                    <div class="item-title">审批结果</div>
                    <div class="item-after">
                      <span class="color-red">待审批</span>
                      <span class="color-green">已通过</span>
                      <span>未通过</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list-block m-list">
              <ul>
                <li class="item-content">
                  <div class="item-inner">
                    <div class="item-title"><span class="tit">审批意见</span></div>
                    <div class="item-input">
                      <input type="text" placeholder="请输入">
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="m-btn">
              <!-- <a class="btn big red radius" href="javascript:;">撤销</a> -->
              <a class="btn big blue radius" href="javascript:;">同意</a>
              <a class="btn big blue radius" href="javascript:;">转交</a>
              <a class="btn big red radius" href="javascript:;">拒绝</a>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>

<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" >
  //取页面参数
  var userInfo=sessionStorage.userInfo ? JSON.parse(sessionStorage.userInfo) :{};
  var tgt = sessionStorage.tgt;
  //rewrite
  if(window["blj"]!==undefined){
    base.env=window.blj.env()||base.env;
    base.setEnv();
  }else{
    base.env=5;
    base.setEnv();
  }
  //params
  try{
    userInfo["id"]=window.blj.getUserId();
    tgt=window.blj.getTGT();
  }catch(e){

  }
  //init  
  var myApp = new Framework7();
  var $$ = Framework7.$;
  var mainView = myApp.addView('.view-main', {
    preloadPreviousPage: true
    , precompileTemplates: true
  });
  //请求参数
  var _communityId = $.Request("communityId"),
      _id =  $.Request("id");
   if(!_communityId || !_id){
       myApp.alert("参数错误");
   }else{
      getDate(_filterType);
   }
  //getDate    
  getApi({
      url:"/js/data/aDetail.json",
      method:"get",
      dataType:"json",
      data :{
        communityId:_communityId,
        approvalId:_id,
        tgt:tgt,
        userId:userInfo["id"]
      },
      success:function(ret){
         if(ret.success){
           var _compiled = Template7.compile($('#js_detail_temp').html());
           $$("#js_detail").html(_compiled({data:ret}));
         }else{
           $.hint(ret.msg);
         }
      }
    });
</script>
<script type="text/tempate7" id="js_detail_temp">
      <div class="list-block m-list">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">请假类型</div>
              <div class="item-after">婚假</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-block m-list">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">开始时间</div>
              <div class="item-after">20115-12-15 12:05</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">结束时间</div>
              <div class="item-after">20115-12-15 12:05</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">请假时长</div>
              <div class="item-after">5小时40分</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-block m-list">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title textarea-tit"><span class="txttit">请假事由</span></div>
              <div class="item-input text">
                 <span>我要去听演唱会，这是我第一次听，希望领导批准</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="m-approveFlow">
        <ul>
          <li class="item f-cb">
            <img class="head" src="../img/head-portrait/amei.jpg">
            <div class="con">
              <span class="name">阿妹</span>
              <span class="status color-blue">发起审批</span>  
            </div>
            <span class="time">20115-12-15 12:30</span>
          </li>
          <li class="item"><i class="arrow"></i></li>
          <li class="item f-cb">
            <img class="head" src="../img/head-portrait/amei.jpg">
            <div class="con">
              <span class="name agree">阿妹</span>
              <span class="status">我同意</span>  
            </div>
            <span class="time">20115-12-15 12:30</span>
          </li>
          <li class="item"><i class="arrow"></i></li>
          <li class="item f-cb">
            <img class="head" src="../img/head-portrait/amei.jpg">
            <div class="con">
              <span class="name refuse">阿妹</span>
              <span class="status">我不同意</span>  
            </div>
          </li>
          <li class="item"><i class="arrow"></i></li>
          <li class="item f-cb">
            <img class="head" src="../img/head-portrait/amei.jpg">
            <div class="con">
              <span class="name careOf">阿妹</span>
              <span class="status">我已经转交啦</span>  
            </div>
          </li>
          <li class="item"><i class="arrow"></i></li>
          <li class="item f-cb">
            <img class="head" src="../img/head-portrait/amei.jpg">
            <div class="con">
              <span class="name only">阿妹</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="m-approveFlow">
        <ul>
          <li class="item f-cb">
            <div class="tit">抄送</div>
            <img class="head" src="../img/head-portrait/amei.jpg">
            <div class="con">
              <span class="name only">阿妹</span> 
            </div>
          </li>
        </ul>
      </div>
      <div class="list-block m-list">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">审批结果</div>
              <div class="item-after">
                <span class="color-red">待审批</span>
                <span class="color-green">已通过</span>
                <span>未通过</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-block m-list">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title"><span class="tit">审批意见</span></div>
              <div class="item-input">
                <input type="text" placeholder="请输入">
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="m-btn">
        <a class="btn big red radius" href="javascript:;">撤销</a>
        <a class="btn big blue radius" href="javascript:;">同意</a>
        <a class="btn big blue radius" href="javascript:;">转交</a>
        <a class="btn big red radius" href="javascript:;">拒绝</a>
      </div>
</script>
</body>
</html>
